/****页面元素样式重置****/
/*
IE浏览器css设置滚动条：

滚动条样式	支持情况	支持浏览器版本	可否继承	描述
scrollbar-3dlight-color	IE特有属性	IE5.5+	y	设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-highlight-color	IE特有属性	IE5.5+	y	设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-face-color	IE特有属性	IE5.5+	y	设置滚动框和滚动条箭头的颜色
scrollbar-arrow-color	IE特有属性	IE5.5+	y	设置滚动条箭头的颜色
scrollbar-shadow-color	IE特有属性	IE5.5+	y	设置滚动框的和滚动条箭头右下边缘的颜色
scrollbar-dark-shadow-color	IE特有属性	IE5.5+	y	设置滚动条槽的颜色
scrollbar-base-color	IE特有属性	IE5.5+	y	设置滚动条主要构成部分的颜色
scrollbar-track-color	IE特有属性	IE5.5+	y	设置滚动条轨迹组成部分的颜色

*/

body {
    scrollbar-arrow-color: #f4ae21;  /*图6,三角箭头的颜色*/
    scrollbar-face-color: #333;  /*图5,立体滚动条的颜色*/
    scrollbar-3dlight-color: #666;  /*图1,立体滚动条亮边的颜色*/
    scrollbar-highlight-color: #666;  /*图2,滚动条空白部分的颜色*/
    scrollbar-shadow-color: #999;  /*图3,立体滚动条阴影的颜色*/
    scrollbar-darkshadow-color: #666;  /*图4,立体滚动条强阴影的颜色*/
    scrollbar-track-color: #666;  /*图7,立体滚动条背景颜色*/

    /*适用与<body>、<div>、<textarea>、<iframe>*/
    scrollbar-base-color:#f8f8f8;  /*滚动条的基本颜色*/
    cursor:url(mouse.cur);  /*自定义个性鼠标*/
}


/*
FF浏览器css设置滚动条：
*/

/* AGENT_SHEET */
/* 应用于所有情况
@-moz-document url-prefix(chrome://), url-prefix(about:),
url-prefix(file:///), url-prefix(http://), url-prefix(https://){
*/
/* 滚动条背景基本样式 */
scrollbar{
    -moz-appearance: none !important;
    background-color: transparent !important;/* 滚动条背景透明 */
    background-image: none !important; /* 滚动条背景图案不显示 */
    position: relative !important; /* 更改滚动条的定位方式为相对 */
    overflow: hidden !important;
    z-index: 999999999 !important; /* 把滚动条提到Z轴最上层 */
}

/* 滚动条按钮基本样式 */
scrollbar thumb{
    -moz-appearance: none !important;
    background-color: rgba(0,100,255,.25) !important;
    border-radius: 0px !important;
    border: 1px !important; /* 滚动条按钮边框 */
    border-color: rgba(0,100,255,.1) !important;  /* 滚动条按钮边框颜色和透明度 */
}

/* 滚动条按钮:鼠标悬停与点击拖动时基本样式 */
scrollbar:hover thumb,
scrollbar thumb:hover,
scrollbar thumb:active {
    background-color: rgba(0,100,255,.75) !important;
    border: 0px !important;
}

/* 垂直滚动条 */
/* 把滚动条位置移到屏幕外，这里的像素应该等于垂直滚动条宽度的负值 */
scrollbar[orient="vertical"]{
    margin-left: -5px !important;
    min-width: 5px !important;
    max-width: 5px !important;
}

/* 垂直滚动条按钮的左边框样式 */
scrollbar thumb[orient="vertical"]{
    border-style: none none none solid !important;
}

/* 水平滚动条 */
/* 把滚动条位置移到屏幕外，这里的像素应该等于垂直滚动条宽度的负值 */
scrollbar[orient="horizontal"]{
    margin-top: -5px !important;
    min-height: 5px !important;
    max-height: 5px !important;
}

/* 水平滚动条按钮的上边框样式 */
scrollbar thumb[orient="horizontal"]{
    border-style: solid none none none !important;
}

/* 去除垂直与水平滚动条相交汇的角落 */
scrollbar scrollcorner{
    display: none ! important;
}

/* 滚动条两端按钮不显示 */
scrollbar scrollbarbutton {
    display: none ! important;
}

/*
滚动条两端按钮，需要先删掉上面一行
scrollbarbutton{
    -moz-appearance: none !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: rgba(0,100,255,.25) !important;
    border: none !important;
}
scrollbar:hover scrollbarbutton, scrollbar scrollbarbutton:hover{
    background-color: rgba(0,100,255,.75) !important;
}

/* 竖滚动条两端按钮的高度
scrollbar[orient="vertical"] scrollbarbutton {
    max-height:10px !important;
    min-height:10px !important;
}

/*
横滚动条两端按钮的宽度
scrollbar[orient="horizontal"] scrollbarbutton {
    max-width: 10px !important;
    min-width: 10px !important;
}
*/

/*
}
*/




/*
Webkit浏览器css设置滚动条：
*/

/*
::-webkit-scrollbar
//滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。（位置1）

::-webkit-scrollbar-button
//滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。（位置2）

::-webkit-scrollbar-track
// 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）

::-webkit-scrollbar-track-piece
//内层轨道，滚动条中间部分（位置4）

::-webkit-scrollbar-thumb
//滚动条里面可以拖动的那部分（位置5）

::-webkit-scrollbar-corner
//边角（位置6）

::-webkit-resizer
//定义右下角拖动块的样式（位置7）
*/

